<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<mytag:head title="农产品溯源系统-用户登录" defineCss="static/css/login.css" />
<link rel="shortcut icon" href="/ncpsy/static/favicon.ico" type="image/x-icon">
<style>
	.nav-container {
		padding: 20px 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.index-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.container {
		max-width:1200px;
		margin: 0 auto;
	}
	.logo-container {
		padding: 10px;
	}
	.nav-logo {
		display: inline-block;
		vertical-align: middle;
		width: 48px;
		height: 48px;
		margin-right: 10px;
	}
	.nav-logo-title {
		display: inline-block;
		vertical-align: middle;
		font-size: 24px;
		color: white;
		cursor: pointer;
	}
	.index-footer {
		position: absolute;
		width: 100%;
		bottom: 0;
		color: #ffffff;
		text-align:center;
		height:123px;
		/*background-color: #F2F8F4;*/
		padding: 26px 0 45px;
		font-size: 16px;
		line-height: 26px;
		box-sizing: border-box;
	}
	.footer-span-wrapper >.span:not(:last-of-type) {
		position: relative;
		margin-right: 15px;
	}
	.footer-span-wrapper >.span:not(:last-of-type)::after {
		content: '|';
		position: absolute;
		right: -11px;
		top: -5px;

	}
	.login-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.form-block {
		background-color: rgba(255,255,255,0.95);
		color: #5A5A5A;
	}

	.form-block > .title {
		font-size: 24px;
		line-height: 28px;
		margin-bottom: 40px;
		text-align: left;
	}
	#loginForm .layui-input {
		width: 308px;
		height: 40px;
		background-color: #EFEFEF;
		color: #A1A1A1;
		font-size: 12px;
		padding: 11px 16px;
	}

	#loginForm .layui-btn {
		background-color: #0AC160;
		color: white;
		border-radius: 0;
		margin-top: 40px;
		width: 100%;
	}

	#loginForm > .layui-form-item {
		margin-bottom: 0;
	}
</style>
<body class="layui-bg-green" style="background:url(/ncpsy/static/img/bg.jpg) center no-repeat;background-size:100%;height:100vh;">
<header class="nav-container">
	<ul class="index-nav layui-container" lay-filter="" style="height: 60px">
		<li class="logo-container">
			<img class="nav-logo" src="/ncpsy/static/img/game_sdk_toolbaricon_logo.png">
			<p onclick="javascript:location.href='/'" class="nav-logo-title"><b>魔橙</b>农产品溯源系统&nbsp;&nbsp;<span style="top: -2px;position: relative;">|</span>&nbsp;&nbsp;登录</p>
		</li>
		<li class="layui-nav-item">
			<!--<a href="/ncpsy/login" style="font-size: 20px;color: white">企业登录</a>-->
		</li>
	</ul>
</header>
<div class="layui-container login-wrapper">
	<div class="layui-row form-container" style="text-align: center">
		<div style="display: inline-block;margin: 0 auto;padding: 58px 44px" class="form-block">
			<h1 class="title">账号登录</h1>
			<form class="layui-form" id="loginForm">
				<div class="layui-form-item">
					<input type="text" name="zh" required  lay-verify="required" placeholder="帐号" autocomplete="off" class="layui-input"><br>
					<input type="password" name="mm" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
					<button class="layui-btn submit-btn" lay-submit lay-filter="login">登录</button>

				</div>
			</form>
		</div>
	</div>
</div>
<div class="footer index-footer">
	<p>Copyright © 2015-2025 magicoranges.cn All rights reserved. 法律声明 隐私政策声明</p>

	<p class="footer-span-wrapper">
		<span class="span">沪ICP备 16023919号</span>
		<span class="span">沪公网安备 31010902002700号</span>
		<span class="span">沪网文(2016) 3347-238号</span>
	</p>
</div>

	<script>
	layui.use(['form', 'layer'], function() {

		var form = layui.form,
		layer = layui.layer;
		
		form.on('submit(login)', function(data) {
			console.log(data.field);
			console.log(data.field);
			var index = layer.load();
			$.ajax({
				url: 'handle/login',
				type: 'post',
				contentType: "application/json;charset=UTF-8",
				data: JSON.stringify(data.field),
				dataType: 'json',
				timeout: 20000,
				success: function(response) {
					console.log(response);
					layer.close(index);
					layer.msg("登录成功");
					//localStorage.setItem("qyid", response.qyid);
					//将返回的企业信息储存在localStorage
					for(var prop in response) {
						localStorage.setItem("" + prop, response[prop]);
					}
					window.location.href="home";
				},
				error: function(response) {
					console.log(response);
					layer.close(index);
					layer.msg("请求出错，请重试!");
				}
			});
			return false;
		})
	})
	</script>

</body>
</html>